<template>
  <div>
    <select-area
      v-model="addressInfo.province"
      :type="'province'"
      :options="provinceOptions"
      @change="handleChangeProvince"
    />
    <select-area
      v-model="addressInfo.city"
      :type="'city'"
      :options="cityOptions"
      @visible-change="(status: boolean) => getAreaOptions(status, 'city')"
      @change="handleChangeCity"
    />
    <select-area
      v-model="addressInfo.area"
      :type="'area'"
      :options="areaOptions"
      @visible-change="(status: boolean) => getAreaOptions(status, 'area')"
    />
    <el-input
      v-model="addressInfo.detailAddress"
      :placeholder="'请输入详细地址'"
    ></el-input>
  </div>
</template>
<script setup lang="ts">
import selectArea from "./select-area.vue";
import ProvinceData from "./province";
import CityData from "./city";
import AreaData from "./area";
import type { AddressInfo, AreaOptionInter } from "./area.type";
const props = defineProps({
  addressInfo: {
    type: Object as () => AddressInfo,
    default: () => ({}),
  },
});
const provinceOptions = Object.keys(ProvinceData).map((key) => {
  return {
    code: key,
    name: ProvinceData[key],
  };
});

const cityOptions = ref<AreaOptionInter[]>([]);
const areaOptions = ref<AreaOptionInter[]>([]);
const getAreaOptions = (menuStatus: boolean, type: string) => {
  if (menuStatus) {
    if (type === "city" && props.addressInfo.province) {
      cityOptions.value = Object.keys(CityData[props.addressInfo.province.code]).map((key) => {
        return {
          code: key,
          name: CityData[props.addressInfo.province!.code][key],
        };
      });
    } else if (
      type === "area" &&
      props.addressInfo.province &&
      props.addressInfo.city
    ) {
      areaOptions.value = Object.keys(
        AreaData[props.addressInfo.city.code]
      ).map((key) => {
        return {
          code: key,
          name: AreaData[props.addressInfo.city!.code][key],
        };
      });
    }
  }
};
const handleChangeProvince = (value: AreaOptionInter) => {
  console.log(value)
  cityOptions.value = [];
  areaOptions.value = [];
  props.addressInfo.city = null;
  props.addressInfo.area = null;
};
const handleChangeCity = (value: AreaOptionInter) => {
  console.log(value)
  areaOptions.value = [];
  props.addressInfo.area = null;
};
</script>
<style lang="scss"></style>
